<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<script src="js/jquery-3.4.1.min.js"></script>
<body>

<table id="tableJson" width="500px" height="400px" align="center" border="1px" cellspacing="0">
    <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品描述</th>
    </tr>
</table>
</body>
<script>
    $(function(){
        alert("页面载入事件触发了") ;
        //Jquery的ajax

        //获取id="myTr"的标签对象
        var tableJson = $("#tableJson") ;
        $.ajax({
            url:"/Spring_mybatis_servlet_war/ShopServlet", //后台接口地址
            type:"get",
            success: function(data){ //data:服务器响应过来成功的数据
                //遍历data
                alert(data) ;
                $(data).each(function(){

                    var item = "<tr>" +
                        "<td>"+this.shopDesc+"</td>" +
                        "<td>"+this.shopName+"</td>" +
                        "<td>"+this.shopPrice+"</td>" +
                        "<td>"+this.shopId+"</td>" +
                        "</tr>" ;

                    tableJson.append(item) ;

                })
            },
            dataType: "json" //服务器想响应过来的数据格式
        }) ;
    });
</script>
</html>